<template>
    <div class="header pt16">
        <p @click="collapse" class="pl24 font-bigger pointer">
            <i :class="isCollapse ? 'el-icon-caret-right' : 'el-icon-caret-left'"></i>
        </p>
        <div>
            <span @click="$router.push({name:'cartList'})" class="pointer"><i class="el-icon-sold-out mr8"></i></span>
            <span class="mr8">
                <el-tooltip class="item pointer" effect="dark" placement="bottom">
                   <div slot="content" @click="exit" class="pointer">退出</div>
                    <img style="width:40px;height: 40px;border: 1px dashed #d9d9d9;border-radius: 50px;"
                         :src="baseURL+avatar">
                </el-tooltip>
            </span>
        </div>

    </div>
</template>

<script type="text/javascript">
    import {baseURL} from "../../utils/axios";

    export default {
        name: "topHeader",
        data() {
            return {
                isCollapse: false,
                name: '',
                avatar:'',
                baseURL:baseURL
            }
        },
        methods: {
            // 更新侧边栏展开和关闭状态
            collapse() {
                let isCollapse = !this.isCollapse;
                this.$eventBus.emit('updateCollapse', {
                    status: isCollapse
                });
            },
            exit() {
                this.$router.push({name: 'login'});
                sessionStorage.clear();
            },

        },
        mounted() {
            this.$eventBus.on('updateCollapseCb', (data) => {
                this.isCollapse = data.status;
            });
            this.$eventBus.on('updateName', (name) => {
                this.name = name;
            });
            this.$eventBus.on('updateAvatar', (avatar) => {
                this.avatar = avatar;
            });
            this.$eventBus.emit('updateAvatar', sessionStorage.getItem('avatar'));
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .header {
        position: relative;
        z-index: 10;
        height: 64px;
        background: #fff;
        box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
        @include pxAndLh(14);
        display: flex;
        justify-content: space-between;
    }

    .el-icon-sold-out {
        font-size: x-large;
    }

    .pointer {
        cursor: pointer;
    }
</style>
